<template>
  <div class="my_invoice_head">
    <van-sticky>
      <van-nav-bar title="收件地址" left-arrow @click-left="back" right-text="新增" @click-right="addAddress" />
    </van-sticky>
    <div class="list">
      <div class="item mb_18" @click="editAddress(item)" v-for="(item,index) in dataList" :key="index">
        <div class="content">
          <p class="name">
            <span>{{item.realName}}</span>
			&nbsp;&nbsp;
            <span>{{item.cellPhone}}</span>
			
			<br />
            <span style="margin: 0.2rem 0 0 -0.05rem;padding-top: 0.2rem;">{{item.email}}</span>
          </p>
          <p class="number">{{item.address}}</p>
        </div>
      </div>

    </div>
  </div>
</template>

<script>
import api from "api/api"
import { mapState, mapMutations } from 'vuex'
export default {
  data () {
    return {
      chosenAddressId: '1',
      dataList: []
    }
  },
  created () {
    this.getList()
  },
  methods: {
    ...mapMutations(['UPDATA_ADDRESS']),
    getList () {
      api.addressList().then(res => {
        this.dataList = res.data.records
        this.UPDATA_ADDRESS(res.data.records)
      })
    },
    addAddress () {
      this.$router.push('/addressAdd')
    },
    editAddress (item) {
      this.$router.push(`/addressEdit/${item.id}`)
    },
    back () {
      window.history.go(-1)
    }
  }
}
</script>

<style lang="scss">
.my_invoice_head {
  min-height: 100vh;
  background-color: #f5f5f5;
  text-align: left;
  .list {
    .item {
      padding: 0 0.3rem;
      background-color: #fff;
      .content {
        padding: 0.3rem 0 0.1rem 0;
        .name {
          font-size: 0.32rem;
        }
        .number {
          font-size: 0.27rem;
          color: #999;
          margin: 0.33rem 0;
        }
        .price {
          font-size: 0.27rem;
          color: #ff344c;
        }
      }
    }
  }
  .mb_18 {
    margin-bottom: 0.18rem;
  }
  .mb_105 {
    margin-bottom: 1.05rem;
  }
}
</style>